<template>
	<view>
		<view class="header">
			<view>
				<view>账号余额(元)</view>
				<view>{{commission.price}}</view>
			</view>
		</view>
		
		<view class="title">
			账单明细
		</view>
		<!-- 账单明细 -->
		<view v-if="commission.detailed.length">
			<view class="list" v-for="(item,index) in commission.detailed" :key="index">
				<cmd-cell-item :title="item.type" :brief="item.time" :addon="item.balance"  />
			</view>
		</view>
		<view v-else class="nodata">
			<view class="fonticon icon">
				&#xe602;
			</view>
			<view class="txt">
				暂无账单记录
			</view>
		</view>
		
		<form @submit='withdrawal' report-submit='true' >
			<view class="bottom">
				<!-- 获取formid -->
		
				<button  class="absolute" form-type='submit'></button>
				<view class="withdrawal">立即提现</view>
		
			</view>
		</form>
		
		
	</view>
</template>

<script>
	import cmdCellItem from '@/components/cmd-cell-item/cmd-cell-item.vue'
	
	// 接口相关
	import _function from '@/common/_function.js'
	import api from '@/common/api.js'
	
	export default {
		components: {cmdCellItem},
		data() {
			return {
				commission:{}
			};
		},
		methods:{
			
			// 立即提现
			withdrawal(e){
				// 给服务端发送formid
				_function.request(api.formid,{
					formid:e.detail.formId
				},'POST')
				
				uni.navigateTo({
					url:'../withdrawal/withdrawal'
				})
			}
		},
		
		
		async onLoad() {
			
			const res = await _function.request(api.commission)
			if(res.data.code==200){
				this.commission = res.data.data
			}else{
				uni.showToast({
				    title: '获取数据失败',
				    duration: 2000,
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss">
.header{
	height: 140rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #fff;
	background-color: #0081FF;
	font-size: 26rpx;
	&>view{
		display: flex;
		flex-direction: column;
		align-items: center;	
	}
}

.title{
	font-size: 30rpx;
	padding: 20rpx 30rpx;
	border-bottom: 2rpx solid #C5CAD5;
	margin-bottom: 20rpx;
}

.bottom{
	position:fixed;
	bottom: 20rpx;
	width: 100%;
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx;
	box-sizing:border-box;
	.withdrawal{
		width: 100%;
		border-radius: 20rpx;
		background-color: #0081FF;
		color: #fff;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.nodata {
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.icon {
			font-size: 80rpx;
		}

		.txt {
			font-size: 40rpx;
		}
	}
</style>
